<template>
  <div class="order_info">
    <el-empty description="暂无数据" v-if="!detailData" />
    <el-form v-else :model="detailData" label-width="auto">
      <h4 class="order_fields">工单信息</h4>
      <el-form-item label="处理方式:" label-width="80">
        <span>{{ detailData.orderType }}</span>
      </el-form-item>
      <el-form-item label="工单分类:" label-width="80">
        <span>{{ detailData.orderWay }}</span>
      </el-form-item>
      <el-form-item label="更新时间:" label-width="80">
        <span>{{ detailData.updateTime }}</span>
      </el-form-item>
      <el-form-item label="当前用时:" label-width="80">
        <span>{{ detailData.currentUseTime }}</span>
      </el-form-item>
      <el-form-item label="总耗时:" label-width="80">
        <span>{{ detailData.totalUseTime }}</span>
      </el-form-item>
      <el-form-item label="客服派单时间:">
        <span>{{ detailData.dispathOrderTime }}</span>
      </el-form-item>
      <el-form-item label="服务商接单时间:">
        <span>{{ detailData.receivingOrderTime }}</span>
      </el-form-item>
      <el-form-item label="服务商派工时间:">
        <span>{{ detailData.dispathOrderEngineerTime }}</span>
      </el-form-item>
      <el-form-item label="工程师接单时间:">
        <span>{{ detailData.engineerReceivingOrderTime }}</span>
      </el-form-item>
      <el-form-item label="完成时间:">
        <span>{{ detailData.orderEndTime }}</span>
      </el-form-item>
      <div class="fields_o" v-if="detailData.orderParamFields.length > 0">
        <h4 class="order_fields">自定义字段</h4>
        <div v-for="(item, bigindex) in detailData.orderParamFields" :key="bigindex">
          <el-form-item :label="`${item.name}:`" label-width="auto">
            <!-- 图片 -->
            <div
              class="upload_file"
              v-if="item.type === 5 || item.type === 6 || item.type === 7"
              :key="bigindex"
            >
              <ul class="ul_list">
                <li class="li_item" v-for="(file, index) in item.val">
                  <div class="li_item_left">
                    <img
                      :src="pdf"
                      alt=""
                      style="width: 30px; height: 30px; cursor: pointer"
                      @click.stop="lookFile(file, '附件')"
                      v-if="
                        file.split('/')[file.split('/').length - 1].replace(/.+\./, '') == 'pdf'
                      "
                    />
                    <el-icon
                      style="cursor: pointer"
                      v-else-if="
                        /\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$/.test(
                          file.toLowerCase(),
                        )
                      "
                      size="30"
                      @click.stop="lookFile(file, '视频')"
                    >
                      <Film />
                    </el-icon>
                    <el-image
                      v-else
                      :preview-src-list="[file]"
                      style="width: 30px; height: 30px"
                      :src="file"
                      fit="cover"
                    />

                    <el-tooltip effect="dark" placement="top">
                      <template #content>
                        {{ file.split('/')[file.split('/').length - 1] }}
                      </template>
                      <span class="pic_name">{{
                        file.split('/')[file.split('/').length - 1]
                      }}</span>
                    </el-tooltip>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 评分 -->
            <el-rate v-else-if="item.type == 8" disabled allow-half v-model="item.val[0]" />
            <span v-if="item.type === 8">{{ item.val[0] * 2 }}</span>
            <span
              class="text_c"
              v-else-if="item.type === 1 || item.type === 2 || item.type === 3 || item.type === 4"
              >{{ item.val[0]?.toString() }}</span
            >
          </el-form-item>
        </div>
      </div>
    </el-form>
    <!-- 文件查看 -->
    <el-dialog
      :title="`查看${file.type}`"
      v-model="dialogContract"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <iframe
        :src="`${file.file}`"
        width="100%"
        height="100%"
        style="height: 700px"
        frameborder="0"
      ></iframe>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, toRefs } from 'vue'
  import { getOrderParamField } from '../../../../../api/order'
  import { ElMessage } from 'element-plus'
  import pdf from '@/assets/image/pdf.png'
  const props = defineProps({
    workId: [String, Array],
  })
  const { workId } = toRefs(props)
  const detailData = ref(null)

  // 获取详情
  function getDetail() {
    getOrderParamField(workId.value).then((res) => {
      if (res.data.success) {
        detailData.value = res.data.data.row
        if (res.data.data.row.orderParamFields.length > 0) {
          detailData.value.orderParamFields = res.data.data.row.orderParamFields.map((o) => {
            if (o.type == 8) {
              o.val[0] = Number(o.val[0]) / 2
            }
            return o
          })
        }
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
      }
    })
  }
  // 查看图片
  const file = ref({ file: null, type: '' }) //文件
  const dialogContract = ref(false) //文件查看弹窗
  const lookFile = (val, type) => {
    file.value = { file: val, type: type }
    dialogContract.value = true
  }
  onMounted(() => {
    getDetail()
  })
  defineExpose({ getDetail })
</script>
<style lang="scss" scoped>
  :deep(.el-form-item) {
    .el-form-item__label {
      font-size: 12px;
    }

    .el-form-item__content {
      font-size: 12px;
    }
  }

  .order_info {
    height: 76.5vh;
    overflow-y: auto;
    background-color: #fff;
    padding: 0 8px;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    .text_c {
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
    }

    .order_fields {
      font-size: 14px;
      border-left: 3px solid #007cff;
      padding-left: 5px;
      margin: 10px 0 5px;
    }

    .fields_o {
      padding-bottom: 50px;

      .upload_file {
        width: 100%;

        :deep(.el-upload-dragger) {
          padding: 0;
          font-size: 12px;
          height: 40px;
          line-height: 10px !important;
          color: #999;
        }

        .up_icon {
          color: #ccc;
          font-size: 24px;
        }

        .ul_list {
          max-height: 230px;
          overflow-y: auto;
          margin-top: 10px;
          padding: 0 6px;

          .li_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
            font-size: 12px;

            .li_item_left {
              display: flex;
              align-items: center;
              width: 100%;

              .pic_name {
                padding-left: 10px;
                color: #000;
                margin-right: 5px;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 90%;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
</style>
